<template>
  <div
    ref="w-e-container"
    class="w-e-container"
  >
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 300px"
      :default-config="editorConfig"
      :value="value"
      v-bind="$attrs"
      :mode="mode"
      @onChange="onChange"
      @onCreated="onCreated"
      v-on="$listeners"
    />
  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import request from '@/utils/request'
import { getUrl, getSign } from '@/utils/request/sign'
export default {
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String
    },
    readonly: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String
    }
  },

  data() {
    return {
      editor: null,
      toolbarConfig: { excludeKeys: ['uploadVideo'] },
      editorConfig: {
        // readOnly: false,
        placeholder: this.placeholder,
        // autoFocus: true,
        MENU_CONF: {
          uploadImage: {
            // 自定义上传
            customUpload: (file, insertFn) => {
              let formData = new FormData()
              formData.append('file', file)
              request({
                url: '/sys-storage/upload',
                method: 'post',
                headers: {
                  'Content-Type': 'multipart/form-data'
                },
                params: getSign(),
                data: formData,
                timeout: 0
              })
                .then((res) => {
                  const fileName = res.data.fileName
                  const fileToken = res.data.fileToken
                  const downloadUrl = this.VUE_APP_DOWNLOAD_API
                  const fullUrl = `${downloadUrl}?f8s=${fileToken}`
                  // console.log(url)
                  insertFn(fullUrl, fileName, fullUrl)
                })
                .catch((err) => {
                  console.log(err)
                })
              // file 即选中的文件
              // 自己实现上传，并得到图片 url alt href
              // 最后插入图片
            }
          },
          insertLink: {
            parseLinkUrl: this.$xss
          },
          insertImage: {
            parseImageSrc: this.$xss
          },
          insertVideo: {
            parseVideoSrc: this.$xss
          }
        }
      },
      mode: 'default' // or 'simple'
    }
  },
  watch: {
    readonly(val) {
      this.setReadonly(val)
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onChange(editor) {
      if (editor.getText()) {
        this.$emit('input', editor.getHtml())
      } else {
        this.$emit('input', '')
      }
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
      this.setReadonly(this.readonly)
    },
    setReadonly(val) {
      if (val) {
        this.editor.disable()
      } else {
        this.editor.enable()
      }
    }
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.w-e-container {
  border: 1px solid #ccc;
}
::v-deep .w-e-text-placeholder {
  top: 9px;
  left: 16px;
}
</style>
